@(input:String)
@config.main("Search"){

    <link rel="stylesheet" media="screen" href="@routes.Assets.versioned("config/allSearch.css")">


    <style>

            .search-form {
                display: flex;
                justify-content: center;
                margin-top: 20px;
            }

    </style>

    <div class="body-box">
        <div class="page-box">

            @config.subTitle("Search")

            <div class="main-body">

                <form class="registration-form form-horizontal search-form" id="form"
                accept-charset="UTF-8" method="get" action="/alfalfa/all/searchPage">

                    <input type="text" class="form-control" name="input" style="height: 40px;width: 80%;
                        float: left" placeholder="Keyword" id="input">

                    <button style="
                        background-color: transparent;
                        border: transparent;
                        margin-top: 4px;
                        margin-left: -35px;" type="submit">
                        <i class="fa fa-search" style="font-size: 20px"></i>
                    </button>


                </form>
                <span   style=" margin-left: 11%;text-align: left">
                    e.g.,&nbsp;<a href="#" onclick="showExample()" class="resLink"><em id="egQuery">
                    example</em></a></span>

                <div id="result" class="search-result">
                    <hr/>

                    <h3><b>Keyword : </b><span>@input</span></h3>


                    <table id="table" class="table table-search" data-pagination="true" data-page-list="[5, 10]"
                    data-page-size="5"
                    style="margin-top: 20px"></table>
                </div>

            </div>
        </div>
    </div>


    <script>


        $(function () {
            $('#table').bootstrapTable({
                method: 'post',
                url: "@routes.AllSearchController.searchByDbInput(input)",
                sidePagination: "server",
                pageNumber: 1,
                pagination: true,
                pageList: [5, 10],
                pageSize: 5,
                contentType: "application/x-www-form-urlencoded",
                showHeader: false,
                columns: [{
                    field: "result",
                    formatter: function (value, row, index) {
                        let genelink = "/alfalfa/browse/gene/" + row.id;
                        let genomelink = "/alfalfa/browse/genome/" + row.species;

                        const main = "<div class='result-border'><a href='" + genelink + "' target='_blank'>" + row.geneid + "</a>" +
                                "<a href='" + genomelink + "' target='_blank'><span class='type-right'>" +
                                "&nbsp;" + row.species + "&nbsp;</span></a><hr>";
                        let option = "";
                        $.each(row.result, function (i, v) {
                            option += "<p style='font-size: 14px'><b>" + v.option + " ：</b> " + v.result + "</p>";
                        });
                        let block = ""
                        if (row.block.isBlock === "true") {

                            block += "<p style='font-size: 14px' id='start1" + row.id + "'><b> Block ：</b> <span id='start" + row.id +
                                    "'></span> <button id='btn" + row.id + "' class='btn my-btn ' onclick=\"showBlock('" + row.id + "')\" style='font-size: 14px;margin-left: 10px;padding-top: 2px;padding-bottom: 2px'>Show</button>" +
                                    "<table class='table' style='font-size: 14px;display: none;' id='block" + row.id + "'>" +
                                    `<tbody>${row.block.block}` +
                                    "</tbody>" +
                                    "</table>" +
                                    "" +
                                    "" +
                                    "</p>";

                        }

                        return main + option + block + "</div>";
                    }
                }]
            });


        })

        function showExample() {
            $("#input").val("ko03021 NAM")
        }

        function showBlock(id) {
            let v = $("#btn" + id).text();
            if (v === "Show") {
                $("#btn" + id).text("Hide");
                $("#block" + id).show();
            } else {
                $("#btn" + id).text("Show");
                $("#block" + id).hide();
            }
        }


    </script>

}